import React, { useState } from 'react';
import { ISettings } from '../types';
import './index.less';
interface IProps {
    settings: ISettings;
    setSettings: any;
    status: string;
}
export default React.memo((props: IProps) => {
    const {
        settings: { width, height, x, y, maxWidth, maxHeight, minHeight, minWidth },
        setSettings,
        status,
    } = props;
    const onMouseDown = (e: any) => {
        if (status === 'ing') return
        e.persist();
        const outer = document.getElementById('outer');
        if (!outer) return;
        document.onmousemove = function (event: any) {
            // console.log(event);
            requestAnimationFrame(() => {
                // console.log('move', e.pageY, event.pageY)
                const moveX = event.pageX - e.pageX; // 大于0 向右，小于0 向左
                const moveY = event.pageY - e.pageY; // 大于0 向下，小于0 向上
                // console.log(moveX, moveY);
                switch (e.target.id) {
                    case 'outer':
                    case 'dragText':
                        outer.style.top = Math.min(Math.max(y + moveY, 0), maxHeight - height) + 'px';
                        outer.style.left = Math.min(Math.max(x + moveX, 0), maxWidth - width) + 'px';
                        break;
                    case 'n':
                        outer.style.top = Math.min(Math.max(y + moveY, 0), maxHeight - height) + 'px';
                        outer.style.height = Math.min(Math.max(height - moveY, minWidth), maxHeight) + 'px';
                        break;
                    case 'ne':
                        outer.style.top = Math.min(Math.max(y + moveY, 0), maxHeight - height) + 'px';
                        outer.style.height = Math.min(Math.max(height - moveY, minWidth), maxHeight) + 'px';
                        outer.style.width = Math.min(Math.max(width + moveX, minWidth), maxWidth) + 'px';
                        break;
                    case 'e':
                        outer.style.width = Math.min(Math.max(width + moveX, minWidth), maxWidth) + 'px';
                        break;
                    case 'se':
                        outer.style.width = Math.min(Math.max(width + moveX, minWidth), maxWidth) + 'px';
                        outer.style.height = Math.min(Math.max(height + moveY, minWidth), maxHeight - y) + 'px';
                        break;
                    case 's':
                        outer.style.height = Math.min(Math.max(height + moveY, minWidth), maxHeight - y) + 'px';
                        break;
                    case 'sw':
                        outer.style.width = Math.min(Math.max(width - moveX, minWidth), maxWidth - x) + 'px';
                        outer.style.left = Math.min(Math.max(x + moveX, 0), maxWidth - minWidth) + 'px';
                        outer.style.height = Math.min(Math.max(height + moveY, minWidth), maxHeight - y) + 'px';
                        break;
                    case 'w':
                        outer.style.width = Math.min(Math.max(width - moveX, minWidth), maxWidth - x) + 'px';
                        outer.style.left = Math.min(Math.max(x + moveX, 0), maxWidth - minWidth) + 'px';
                        break;
                    case 'nw':
                        outer.style.width = Math.min(Math.max(width - moveX, minWidth), maxWidth - x) + 'px';
                        outer.style.left = Math.min(Math.max(x + moveX, 0), maxWidth - minWidth) + 'px';
                        outer.style.top = Math.min(Math.max(y + moveY, 0), maxHeight - height) + 'px';
                        outer.style.height = Math.min(Math.max(height - moveY, minWidth), maxHeight) + 'px';
                        break;
                }
            });
        };
        document.onmouseup = function (event) {
            // console.log(event);
            document.onmousemove = null;
            document.onmouseup = null;
            const moveX = event.pageX - e.pageX; // 大于0 向右，小于0 向左
            const moveY = event.pageY - e.pageY; // 大于0 向下，小于0 向上
            switch (e.target.id) {
                case 'outer':
                case 'dragText':
                    setSettings((prev: ISettings) => ({
                        ...prev,
                        y: Math.min(Math.max(y + moveY, 0), maxHeight - height),
                        x: Math.min(Math.max(x + moveX, 0), maxWidth - width),
                    }));
                    break;
                case 'n':
                    setSettings((prev: ISettings) => ({
                        ...prev,
                        y: Math.min(Math.max(y + moveY, 0), maxHeight - height),
                        height: Math.min(Math.max(height - moveY, 60), maxHeight),
                    }));
                    break;
                case 'ne':
                    setSettings((prev: ISettings) => ({
                        ...prev,
                        y: Math.min(Math.max(y + moveY, 0), maxHeight - height),
                        height: Math.min(Math.max(height - moveY, 60), maxHeight),
                        width: Math.min(Math.max(width + moveX, minWidth), maxWidth),
                    }));
                    break;
                case 'e':
                    setSettings((prev: ISettings) => ({
                        ...prev,
                        width: Math.min(Math.max(width + moveX, minWidth), maxWidth),
                    }));
                    break;
                case 'se':
                    setSettings((prev: ISettings) => ({
                        ...prev,
                        width: Math.min(Math.max(width + moveX, minWidth), maxWidth),
                        height: Math.min(Math.max(height + moveY, 60), maxHeight - y)
                    }));
                    break;
                case 's':
                    setSettings((prev: ISettings) => ({
                        ...prev,
                        height: Math.min(Math.max(height + moveY, 60), maxHeight - y)
                    }));
                    break;
                case 'sw':
                    setSettings((prev: ISettings) => ({
                        ...prev,
                        height: Math.min(Math.max(height + moveY, 60), maxHeight - y),
                        width: Math.min(Math.max(width - moveX, minWidth), maxWidth - x),
                        x: Math.min(Math.max(x + moveX, 0), maxWidth - minWidth),
                    }));
                    break;
                case 'w':
                    setSettings((prev: ISettings) => ({
                        ...prev,
                        width: Math.min(Math.max(width - moveX, minWidth), maxWidth - x),
                        x: Math.min(Math.max(x + moveX, 0), maxWidth - minWidth),
                    }));
                    break;
                case 'nw':
                    setSettings((prev: ISettings) => ({
                        ...prev,
                        width: Math.min(Math.max(width - moveX, minWidth), maxWidth - x),
                        x: Math.min(Math.max(x + moveX, 0), maxWidth - minWidth),
                        y: Math.min(Math.max(y + moveY, 0), maxHeight - height),
                        height: Math.min(Math.max(height - moveY, 60), maxHeight),
                    }));
                    break;
            }
        };
    };
    return (
        <div
            style={{ height, width, top: y, left: x }}
            onMouseDown={(e) => onMouseDown(e)}
            className="drag-outer"
            id="outer"
            tabIndex={1}
        >
            <div id="n" className="drag-direction direction-n"></div>
            <div id="ne" className="drag-direction direction-ne"></div>
            <div id="e" className="drag-direction direction-e"></div>
            <div id="se" className="drag-direction direction-se"></div>
            <div id="s" className="drag-direction direction-s"></div>
            <div id="sw" className="drag-direction direction-sw"></div>
            <div id="w" className="drag-direction direction-w"></div>
            <div id="nw" className="drag-direction direction-nw"></div>
            <div id="dragText" className="drag-tip">调整</div>
        </div>
    );
});
